@use 'sass:map';
@use 'sass:color';

// 颜色变量
$primary-color: #6B46C1; // 紫色主色调
$primary-light: #EDE9FE; // 浅紫色背景
$primary-dark: #553C9A; // 深紫色
$text-primary: #1A1A1A; // 主要文字颜色
$text-secondary: #666666; // 次要文字颜色
$border-color: #E2E8F0; // 边框颜色
$white: #FFFFFF;
$error: #E53E3E;
$success: #38A169;

// 字体大小
$font-size-xs: 0.75rem; // 12px
$font-size-sm: 0.875rem; // 14px
$font-size-base: 1rem; // 16px
$font-size-lg: 1.125rem; // 18px
$font-size-xl: 1.25rem; // 20px

// 间距
$spacing-1: 0.25rem; // 4px
$spacing-2: 0.5rem; // 8px
$spacing-3: 0.75rem; // 12px
$spacing-4: 1rem; // 16px
$spacing-5: 1.25rem; // 20px
$spacing-6: 1.5rem; // 24px
$spacing-7: 2rem; // 32px
$spacing-8: 2.5rem; // 40px

// 圆角
$border-radius-sm: 0.125rem; // 2px
$border-radius: 0.25rem; // 4px
$border-radius-lg: 0.5rem; // 8px

// 阴影
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin transition-base {
  transition: all 0.3s ease;
}

// 响应式断点
$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px,
  '2xl': 1536px
);

@mixin respond-to($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (min-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}